QuickEdit: Add Featured Image Control #64496

gigitux · 2024-08-14T09:13:23Z

What?

This PR adds the Featured Image Control for the Page view.

Screen.Capture.on.2024-09-18.at.18-09-37.mov

View mode

Grid	Table	Layout

Edit

Without Image	With Image

Additional Changes

Render component and view prop

With this PR, the render component will now receive the view prop. This addition is necessary because the component’s layout needs to adapt based on the view. Similar cases include the Title field, where different layouts are required depending on the view.

gutenberg/packages/edit-site/src/components/post-fields/index.js

Lines 163 to 164 in 8356977

    
           [ LAYOUT_TABLE, LAYOUT_GRID ].includes( viewType ) && 
        
           item.status !== 'trash';

Fix error on bulk edit mode

Screen.Capture.on.2024-09-18.at.18-01-00.mp4

Uncaught TypeError: Cannot read properties of null (reading 'status')

Currently, there is an error when the user edits a field in bulk mode. This PR fixes this error.

Attachment type

This PR updates the Attachment type.

Why?

How?

Testing Instructions

Ensure that Quick Edit in DataViews and Quick Edit in DataViews are enabled.

Visit the Site Editor
Click on pages.
Toggle to the table view.
Click on the settings.
Make the feature image field visible.
Click on details panel icon.
Ensure that the Featured Image option is available.
Click on it.
Ensure that the Media Gallery opens and click on an image.
Save.
Ensure that the image is set as the featured image to the post.
Toggle to the grid view.
Ensure that the image is rendered correctly.
Toggle to the list view.
Ensure that the image is rendered correctly.

Testing Instructions for Keyboard

Screenshots or screencast

…image-control

jameskoster · 2024-08-15T14:08:32Z

To be clear, I think the Featured Image control should remain as it is currently in terms of design and position.

However I also recognise that panel Data Forms should be able to handle image fields, respecting the established conventions of this layout. Here's a mockup and flow that could achieve that:

What do you think?

gigitux · 2024-08-16T09:54:56Z

To be clear, I think the Featured Image control should remain as it is currently in terms of design and position.

However I also recognise that panel Data Forms should be able to handle image fields, respecting the established conventions of this layout. Here's a mockup and flow that could achieve that:
What do you think?

Thanks for your feedback! It makes sense! I'm going to implement your feedback! 🚀

…image-control

gigitux · 2024-08-22T13:57:29Z

Hey @jameskoster, I've implemented your suggestion:

Screen.Capture.on.2024-08-22.at.15-42-51.mp4

Let me know if, from the design perspective, there is something to address.

I’m not marking this PR as ready for review because we still need to implement the default edit control for the image field. Since DataViews is a general-purpose library, we shouldn’t rely on the WordPress Media Gallery for the generic control. Instead, I suggest using the Operating System’s file selection option:

Screen.Capture.on.2024-08-22.at.15-52-20.mp4

However, please note that in this case, we won’t have access to the filename once the file is uploaded.

jameskoster · 2024-08-22T15:21:36Z

Thanks for the update. The flow seems pretty good, but there are some design details to fix.

Border radius is missing
Border should use $border-width (not the focus width)
Border color should be $gray-300
Hover background should be $gray-100
Thumbnail should be 24px
The thumbnail appearance should match unset color swatches
Gap between swatch and text should be 8px (seems you can remove the margin on the span)
Padding should be 8px 12px

Also here:

Thumbnail should be 24px with $radius-small border-radius. Ideally there should be a semi-transparent black outline so that white images are still visible. You can see an example in data views if you toggle on the preview.
Image name container height should be 24px to align with thumbnail
Filename should be 12px, with 16px line-height
Gap between thumbnail and text should be 8px (again, removing the margin on the span should fix)
Padding should be 8px 12px
Reset button size should be small (24px) to align with the image name / thumbnail
Ideally the filename would be truncated so that you can see the filetype. Perhaps this can be accomplished by using the Text component with the truncate and ellipsizeMode props.

Here's a mockup that hopefully clarifies some of the details:

gigitux · 2024-08-23T08:24:21Z

With 9a39fe6, I addressed your feedback!

Screen.Capture.on.2024-08-23.at.10-14-17.mp4

The only remaining challenge is that the filename can only be truncated to a fixed number of characters, which may result in it not always ending directly under the remove button.

gigitux · 2024-08-23T08:26:26Z

packages/edit-site/src/components/post-fields/index.js

+														event.target.tagName.toLowerCase();
+													// Prevent opening the media modal when clicking on the button/icon.
+													if (
+														element !== 'button' &&
+														element !== 'svg'
+													) {


The issue is that there's a button within a clickable area, and clicking the button triggers a separate action. I'm not sure if this is the best way to handle it.

Yeah we should avoid nested buttons. We had a similar issue in data views list layout... this UI:

Perhaps some of the techniques there can be borrowed?

gigitux · 2024-08-23T08:27:22Z

packages/edit-site/src/components/post-fields/index.js

+									render={ ( { open } ) => {
+										return (
+											<div
+												role="button"


Related comment: https://github.com/WordPress/gutenberg/pull/64496/files#r1728584779

jameskoster · 2024-08-23T10:49:42Z

Nice, it's getting there :)

Border-radius on the thumbnail and button are still missing.

Truncation of the file name seems to occur slightly before it's necessary. In the screenshot below note that there's more space the title could occypy.

I know the button that appears in the panel is a work in progress, but I wonder if it could have the same appearance as the author field. What do you think?

gigitux · 2024-08-23T11:16:21Z

Truncation of the file name seems to occur slightly before it's necessary. In the screenshot below note that there's more space the title could occypy.

As I mentioned in the previous comment, this could be complex to achieve given that Text components can only truncate to a fixed number of characters, which may result in it not always ending directly under the remove button.

I know the button that appears in the panel is a work in progress, but I wonder if it could have the same appearance as the author field. What do you think?

Do you mean something like this?

jameskoster · 2024-08-23T11:24:43Z

given that Text components can only truncate to a fixed number of characters

Are you sure? It seems to truncate based on width when truncate is true and numberOfLines is 1?

Do you mean something like this?

Sorry I should have been more explicit. See the mockup below and notice that the Author and Featured Image buttons (outlined in red) share the same characteristics; thumbnail size, gap, spacing, etc.

gigitux · 2024-08-23T11:29:55Z

Are you sure? It seems to truncate based on width when truncate is true and numberOfLines is 1?

The documentation says that when ellipsizeMode is middle (our case), the limit property is required:

´Limit` is the max number of characters to be displayed:

So, if we want to truncate in the middle (so, showing the extension), we need to explicit the max number of characters.

Sorry I should have been more explicit. See the mockup below and notice that the Author and Featured Image buttons (outlined in red) share the same characteristics; thumbnail size, gap, spacing, etc.

No worries! Gotcha! Thanks! 🙇

…image-control

packages/fields/tsconfig.json

youknowriad · 2024-10-22T13:52:50Z

packages/edit-site/src/components/post-fields/index.js

-				),
-				enableSorting: false,
-			},
+			featuredImageField,


I like that we're moving the dataviews fields to the fields package one by one 👍 and fixing them (removing dependencies...)

packages/edit-site/src/components/sidebar-dataviews/default-views.js

youknowriad · 2024-10-22T13:54:03Z

packages/fields/src/actions/utils.ts

@@ -34,10 +34,10 @@ export function getItemTitle( item: Post ) {
 	if ( typeof item.title === 'string' ) {
 		return decodeEntities( item.title );
 	}
-	if ( 'rendered' in item.title ) {
+	if ( item.title && 'rendered' in item.title ) {


In which case do we call this function with a non existent item.title ?

I remember encountering some errors in the past, which led me to add this check. However, I’m no longer able to replicate the issue. I’m happy to revert the changes.

Reverted the changes with b039310.

youknowriad

Nice work here.

I know the constraint of "no layout" in render is creating a non ideal result in the list view but hopefully we can address later with a better solution.

youknowriad · 2024-10-22T13:56:01Z

(looks like you need to run.npm install and commit the lock)

youknowriad · 2024-10-22T13:57:48Z

The main downside of this approach is that the click event is no longer configured for the grid view.

I think we should follow-up by having a special callback selectItem similar to getItemId in dataViews, that layouts can trigger when they want: "grid view" can trigger it when clicking the media and primary field, table view can trigger it when clicking primary fields...

gigitux · 2024-10-22T14:11:38Z

(looks like you need to run.npm install and commit the lock)

Fixed with 42f90f4.

youknowriad · 2024-10-22T14:59:37Z

I think we should follow-up by having a special callback selectItem similar to getItemId in dataViews, that layouts can trigger when they want: "grid view" can trigger it when clicking the media and primary field, table view can trigger it when clicking primary fields...

@gigitux Do you think this one is something you can help with? It feels like the most important follow-up here.

gigitux · 2024-10-22T15:07:40Z

Thanks for your review! Based on our discussion, I created three issues:

@gigitux Do you think this one is something you can help with? It feels like the most important follow-up here.

Yes, I will work on #66338!

…image-control

oandregal · 2024-10-23T16:18:50Z

packages/fields/src/fields/featured-image/style.scss

+	}
+}
+
+.dataforms-layouts-panel__field-control {


How do absorb this for any field of type media so consumers don't have to use dataviews classes (they're not public API). Would it be resolved if we add a dataviews type media that absorbs these styles and the "featured media field" uses?

oandregal · 2024-10-23T16:25:39Z

packages/fields/src/fields/featured-image/featured-image-view.tsx

+
+export const FeaturedImageView = ( {
+	item,
+}: DataViewRenderFieldProps< BasePost > ) => {


It seems this could be implemented in a way that is not specific to "featured media", but rather to a media type. For example, what if we do something along these lines:

FeaturedImageView = ({ item, }) { const url = item.getValue(); return (<img src={ url } ); }

If this was a media type field, the field "featured media" could be declared as:

{ id: 'featured-media', type: 'media', getValue: () => { /* convert item to URL here */ }, }

This means that field types would also provide a render default. I think we should assume field types should provide default for every field property.

oandregal · 2024-10-23T16:33:21Z

What are the next steps to consolidate these two experiences for media?

Editor	Quick Edit

youknowriad · 2024-10-24T04:14:57Z

@oandregal yeah, my main idea there (not sure if it's tracked) is to remove the "layout" type in the "form" config and instead have a "form.fields" config that is like that:

[ 
   { field: 'featured-image', label: 'hidden', control: 'inline' }, { field: 'slug', label: 'side', control: 'dropdown' } 
]

or something like that.

gigitux · 2024-10-24T07:49:20Z

@oandregal yeah, my main idea there (not sure if it's tracked) is to remove the "layout" type in the "form" config and instead have a "form.fields" config that is like that:
[ 
   { field: 'featured-image', label: 'hidden', control: 'inline' }, { field: 'slug', label: 'side', control: 'dropdown' } 
]
or something like that.

This is something that we are planning to work on it soon... cc @louwie17

Page Edit View: Implement Featured image page field

785085b

youknowriad requested review from oandregal and jameskoster August 14, 2024 12:26

youknowriad added [Type] Experimental Experimental feature or API. [Feature] DataViews Work surrounding upgrading and evolving views in the site editor and beyond labels Aug 14, 2024

Merge branch 'trunk' of github.com:WordPress/gutenberg into add/page-…

dd7e0a3

…image-control

gigitux mentioned this pull request Aug 14, 2024

DataForm: replicate DocumentInspector in QuickEdit #64519

Open

11 tasks

gigitux added 2 commits August 21, 2024 10:30

Merge branch 'trunk' of github.com:WordPress/gutenberg into add/page-…

77f2217

…image-control

Merge branch 'trunk' of github.com:WordPress/gutenberg into add/page-…

433e45f

…image-control

gigitux force-pushed the add/page-image-control branch 2 times, most recently from 2133ef7 to 0a2c977 Compare August 22, 2024 13:44

improve flow and style

f890963

fix list layout

c32622e

gigitux force-pushed the add/page-image-control branch from 0a2c977 to c32622e Compare August 22, 2024 14:23

improve design

9a39fe6

gigitux commented Aug 23, 2024

View reviewed changes

remove not necessary style

5419b0a

gigitux added 3 commits August 26, 2024 14:21

Merge branch 'trunk' of github.com:WordPress/gutenberg into add/page-…

68ef300

…image-control

improve style

cd923f8

improve default image control

94335a4

use media-utils package

7b1e40a

youknowriad reviewed Oct 22, 2024

View reviewed changes

packages/fields/tsconfig.json Outdated Show resolved Hide resolved

gigitux added 2 commits October 22, 2024 11:21

fix tsconfig

6592d36

remove view prop

c2994e0

youknowriad reviewed Oct 22, 2024

View reviewed changes

packages/edit-site/src/components/sidebar-dataviews/default-views.js Show resolved Hide resolved

youknowriad reviewed Oct 22, 2024

View reviewed changes

youknowriad approved these changes Oct 22, 2024

View reviewed changes

gigitux added 2 commits October 22, 2024 16:10

revert changes

b039310

generate package-lock.json

42f90f4

This was referenced Oct 22, 2024

Featured Image Field: Improve layout #66332

Open

Data Form: define props to differentiate field layouts #66336

Open

gigitux mentioned this pull request Oct 22, 2024

Data Views: Implement selectItem callback #66338

Open

gigitux added 2 commits October 23, 2024 13:29

Merge branch 'trunk' of github.com:WordPress/gutenberg into add/page-…

ea8e941

…image-control

generate package-lock.json

e77b93b

gigitux force-pushed the add/page-image-control branch from 1d0809a to e77b93b Compare October 23, 2024 13:09

youknowriad enabled auto-merge (squash) October 23, 2024 13:32

youknowriad merged commit 77f62e0 into WordPress:trunk Oct 23, 2024
63 checks passed

github-actions bot added this to the Gutenberg 19.6 milestone Oct 23, 2024

oandregal reviewed Oct 23, 2024

View reviewed changes

jameskoster mentioned this pull request Oct 30, 2024

Pages data view: Clicking the featured image in grid layout no longer opens the editor #66588

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

QuickEdit: Add Featured Image Control #64496

QuickEdit: Add Featured Image Control #64496

gigitux commented Aug 14, 2024 •

edited

Loading

jameskoster commented Aug 15, 2024

gigitux commented Aug 16, 2024

gigitux commented Aug 22, 2024

jameskoster commented Aug 22, 2024

gigitux commented Aug 23, 2024

gigitux Aug 23, 2024

jameskoster Aug 23, 2024

gigitux Aug 23, 2024

jameskoster commented Aug 23, 2024

gigitux commented Aug 23, 2024 •

edited

Loading

jameskoster commented Aug 23, 2024

gigitux commented Aug 23, 2024 •

edited

Loading

youknowriad Oct 22, 2024

youknowriad Oct 22, 2024

gigitux Oct 22, 2024

gigitux Oct 22, 2024

youknowriad left a comment

youknowriad commented Oct 22, 2024

youknowriad commented Oct 22, 2024

gigitux commented Oct 22, 2024

youknowriad commented Oct 22, 2024

gigitux commented Oct 22, 2024

oandregal Oct 23, 2024

oandregal Oct 23, 2024 •

edited

Loading

oandregal commented Oct 23, 2024

youknowriad commented Oct 24, 2024

gigitux commented Oct 24, 2024

	[ LAYOUT_TABLE, LAYOUT_GRID ].includes( viewType ) &&
	item.status !== 'trash';

QuickEdit: Add Featured Image Control #64496

QuickEdit: Add Featured Image Control #64496

Conversation

gigitux commented Aug 14, 2024 • edited Loading

What?

View mode

Edit

Additional Changes

Render component and view prop

Fix error on bulk edit mode

Attachment type

Why?

How?

Testing Instructions

Testing Instructions for Keyboard

Screenshots or screencast

jameskoster commented Aug 15, 2024

gigitux commented Aug 16, 2024

gigitux commented Aug 22, 2024

jameskoster commented Aug 22, 2024

gigitux commented Aug 23, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jameskoster commented Aug 23, 2024

gigitux commented Aug 23, 2024 • edited Loading

jameskoster commented Aug 23, 2024

gigitux commented Aug 23, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

youknowriad left a comment

Choose a reason for hiding this comment

youknowriad commented Oct 22, 2024

youknowriad commented Oct 22, 2024

gigitux commented Oct 22, 2024

youknowriad commented Oct 22, 2024

gigitux commented Oct 22, 2024

Choose a reason for hiding this comment

oandregal Oct 23, 2024 • edited Loading

Choose a reason for hiding this comment

oandregal commented Oct 23, 2024

youknowriad commented Oct 24, 2024

gigitux commented Oct 24, 2024

gigitux commented Aug 14, 2024 •

edited

Loading

gigitux commented Aug 23, 2024 •

edited

Loading

gigitux commented Aug 23, 2024 •

edited

Loading

oandregal Oct 23, 2024 •

edited

Loading